<template>
  <div class="info">
    <van-nav-bar
      title="个人信息"
      right-text="保存"
      left-arrow
      @click-left="backMy"
      @click-right="saveInfo"
      class="hmNavbar"
    />
    <div class="cell1">
      <myCell
        title="头像"
        @click.native="showPopup3(infoList.photo)"
        v-model="infoList.photo"
        type="img"
      ></myCell>
      <!-- @click.native="editInfo('昵称', infoList.name)" -->
      <myCell
        title="昵称"
        @click.native="showPopup(infoList.name)"
        v-model="infoList.name"
      ></myCell>
      <myCell
        title="介绍"
        @click.native="showPopup2(myList.intro)"
        v-model="myList.intro"
      ></myCell>
    </div>
    <div class="cell2">
      <myCell
        title="性别"
        :value="infoList.gender === 0 ? '男' : '女'"
        @click.native="show2 = true"
      ></myCell>
      <myCell
        title="生日"
        :value="infoList.birthday | fromtime2"
        @click.native="show3 = true"
      ></myCell>
    </div>
    <van-popup
      class="show5"
      v-model="show5"
      :style="{ height: '152px', width: '90%' }"
    >
      <van-uploader
        :before-read="beforeRead"
        :after-read="afterRead"
        @delete="deleteEvent"
        max-count="1"
      >
        <div>从相册中选择</div>
      </van-uploader>

      <div class="show5center">拍照</div>
      <div>取消</div>
    </van-popup>

    <van-image-preview v-model="show6" @close="closeImg" :images="[imgUrl]">
    </van-image-preview>
    <van-popup
      @closed="changeName"
      v-model="show"
      :style="{ height: '20%' }"
      position="bottom"
    >
      <van-field v-model="valueInput" placeholder="请输入" />
    </van-popup>
    <van-popup
      @closed="changeIntroduce"
      v-model="show4"
      :style="{ height: '20%' }"
      position="bottom"
    >
      <van-field v-model="valueInput2" placeholder="请输入" />
    </van-popup>
    <van-popup v-model="show2" :style="{ height: '40%' }" position="bottom">
      <van-picker
        @confirm="changeGender"
        @cancel="show2 = false"
        title="性别"
        show-toolbar
        :columns="Object.values(genderObj)"
        :default-index="infoList.gender"
      />
    </van-popup>
    <van-popup v-model="show3" :style="{ height: '40%' }" position="bottom">
      <van-datetime-picker
        @confirm="changeBirthday"
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
  </div>
</template>
<script>
import myCell from '@/views/home/my/myCell.vue'
import dayjs from 'dayjs'

import {
  apiGetProfile,
  apiGetUser,
  apiUpdateImg,
  apiUpdate
} from '@/api/use.js'

// apiUpdate
export default {
  data () {
    return {
      infoList: {},
      show: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      minDate: new Date(1940, 1, 1),
      maxDate: new Date(2020, 12, 31),
      currentDate: '',
      valueInput: '',
      valueInput2: '',
      valueInput3: '',
      Introduce: '',
      kind: '',
      genderObj: {
        0: '男',
        1: '女'
      },
      myList: {},
      imgUrl: ''
    }
  },
  methods: {
    initMy () {
      apiGetUser()
        .then(res => {
          console.log(res)
          this.myList = res.data.data
          this.$store.commit('setUserInfo', this.myList)
        })
        .catch(() => {
          this.$toast.fail('我的页面初始化失败')
        })
    },
    closeImg () {
      this.show6 = false
    },
    backMy () {
      this.$router.push('/my')
    },
    saveInfo () {
      this.editInfo()
      this.$router.push('/my')
    },
    getUserInfo () {
      apiGetProfile().then(res => {
        console.log(res)
        this.infoList = res.data.data
      })
    },
    // 修改昵称
    showPopup (value) {
      this.show = true
      this.valueInput = value
    },
    // 修改简介
    showPopup2 (value) {
      this.show4 = true
      this.valueInput2 = value
    },
    showPopup3 (value) {
      this.show5 = true
      this.valueInput5 = value
    },
    changeName () {
      this.infoList.name = this.valueInput
      this.show1 = false
    },
    changeIntroduce () {
      this.myList.intro = this.valueInput2
      this.$store.commit('setUserInfo', this.myList)
    },
    changeGender (value, index) {
      this.show2 = false
      this.infoList.gender = index
    },
    changeBirthday (val) {
      // console.log('shengri', val.getTime())
      // console.log('shengri', new Date(val.getTime()).format('yyyy-MM-dd'))
      // console.log(formatter())
      this.infoList.birthday = this.currentDate
      this.show3 = false
    },
    // 上传前
    beforeRead (file) {
      const isImg =
        file.type === 'image/png' ||
        file.type === 'image/jpeg' ||
        file.type === 'image/gif'
      if (!isImg) {
        this.$toast.fail('请上传png,jpg,gif图片格式')
      }
      const limit2M = file.size / 1024 / 1024 < 2
      if (!limit2M) {
        this.$toast.fail('请上传2M内的图片')
      }
      return isImg && limit2M
    },
    // 读取后
    async afterRead (res) {
      window.console.log('res', res)
      // const _formData = new FormData()
      // _formData.append('files', res.file)
      const res2 = await apiUpdateImg(res)
      console.log(res2)
      // this.imgUrl = res2.data.data
      this.imgUrl =
        'http://p3.pstatp.com/large/dfic-imagehandler/d94034e2-8079-4de2-a05f-c81fc6f53212'
      this.show5 = false
      this.show6 = true
    },
    // 删除时触发
    deleteEvent () {
      this.inputValue = ''
    },
    editInfo () {
      const name = this.infoList.name
      const intro = this.myList.intro
      const gender = this.infoList.gender
      const birthday = dayjs(this.infoList.birthday).format('YYYY-MM-DD')

      apiUpdate({ name, gender, birthday, intro })
        .then(res => {
          this.$toast.fail('修改成功')
        })
        .catch(() => {
          this.$toast.fail('修改失败')
        })
    }
    // saveGender (value, index) {
    //   console.log('提交性别')
    //   this.show2 = false
    //   const gender = index
    //   console.log(value, index)
    //   apiUpdate({ gender })
    //     .then(res => {
    //       this.getUserInfo()
    //     })
    //     .catch(() => {
    //       this.$toast.fail('修改失败')
    //     })
    // }
  },
  components: {
    myCell
  },

  created () {
    this.getUserInfo()
    this.initMy()
  }
}
</script>

<style lang="less" scoped>
.info {
  width: 100%;
  height: 750px;
  background-color: #f5f7f9;
  .hmNavbar {
    background-color: #e33f3e;
    ::v-deep .van-nav-bar__arrow {
      color: #fff !important;
    }
    ::v-deep .van-nav-bar__title {
      color: #fff !important;
    }
    ::v-deep .van-nav-bar__text {
      color: #fff !important;
    }
  }
  .cell1 {
    margin-bottom: 5px;
  }
  .show5 {
    text-align: center;
    border-radius: 5px;
    .show5center {
      border-top: 2px solid #e6e6e6;
      border-bottom: 2px solid #e6e6e6;
    }
    div {
      box-sizing: border-box;
      height: 50px;
      line-height: 50px;
    }
  }
}
</style>
